<template>
  <div class="login">
      <div class="login_box">
        <div class="avatar">
            <img :src="avaImg" alt="">
        </div>
           <el-form  class="demo-ruleForm" :model="loginForm" :rules="rules2" ref="ruleForm2">
              <el-form-item prop="username">
                   <el-input  prefix-icon="iconfont icon-yonghu" v-model="loginForm.username"></el-input>
              </el-form-item>
               <el-form-item prop="password">
                   <el-input  prefix-icon="iconfont icon-mima" v-model="loginForm.password"
                    type="password"></el-input>
              </el-form-item>
               <el-form-item  class="btn">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    var validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        if (this.loginForm.username !== '') {
          this.$refs.ruleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      avaImg: require('../assets/avatar.jpg'),
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      rules2: {
        username: [
          { validator: validateUser, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]

      }

    }
  },
  methods: {
    resetForm () {
      this.$refs.ruleForm2.resetFields()
    },
    login () {
      this.$refs.ruleForm2.validate(async valid => {
        if (!valid) return

        const { data: res } = await this.$axios.post('login', this.loginForm)
        sessionStorage.setItem('token-cli', res.data.token)
        if (res.meta.status === 200) {
          this.$message.success('登录成功')
          this.$router.push({ path: '/home' })
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.login {
    background-color: #2b4b6b;
    height: 100%;
    .login_box {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        .avatar {
            position: absolute;
            left: 50%;
            top:-20%;
            transform: translateX(-50%);
            width: 130px;
            height: 130px;
            border-radius: 50%;
            box-shadow: 0,0 10px #ddd;
            overflow: hidden;
            img {
                display: block;
                width: 100%;
                height: 100%;
                background-color: #fff;
            }

        }
    }
    .demo-ruleForm {
       margin-top: 120px;
       box-sizing: border-box;
       padding: 0 20px;
    }
}
.btn {
    display: flex;
    justify-content: flex-end;
}
</style>
